<template>
  <div class="material">
    <topcard>素材管理</topcard>
    <div class="bottom">
      <div class="nav">
        <!-- 收藏按钮 -->
        <div class="left">
          <el-radio-group
            v-model="tabPosition"
            style="margin-bottom: 30px;"
            @change="collectTotal"
          >
            <el-radio-button label="left">全部</el-radio-button>
            <el-radio-button label="right">收藏</el-radio-button>
          </el-radio-group>
          <div v-if="tabPosition === 'left'">
            <div class="main">
              <ul>
                <el-row :gutter="20">
                  <div class="item" v-for="item in list" :key="item.id">
                    <el-col :span="4">
                      <li class="item">
                        <el-image
                          style="width: 100%; height: 100%"
                          :src="item.url"
                          :preview-src-list="srcList"
                        >
                        </el-image>
                        <div class="bottom-btn">
                          <div class="left-i">
                            <i
                              class="collection el-icon-star-off"
                              :class="{ active1: item.is_collected === true }"
                              @click="isCollect(item)"
                            ></i>
                          </div>
                          <div class="right-i">
                            <i
                              class="delete el-icon-delete"
                              @click="remove(item.id)"
                            ></i>
                          </div>
                        </div>
                      </li>
                    </el-col>
                  </div>
                </el-row>
              </ul>
            </div>
          </div>
          <div class="main" v-else>
            <ul>
              <el-row :gutter="20">
                <div class="item" v-for="item in list" :key="item.id">
                  <el-col :span="4">
                    <li class="item">
                      <el-image
                        style="width: 100%; height: 100%"
                        :src="item.url"
                        :preview-src-list="srcList"
                      >
                      </el-image>
                    </li>
                  </el-col>
                </div>
              </el-row>
            </ul>
          </div>
        </div>
        <div class="right">
          <el-button type="success" size="mini" @click="dialogVisible = true"
            >上传图片素材</el-button
          >
        </div>
      </div>

      <!-- 图片 -->

      <!-- 分页 -->
      <!-- @size-change="handleSizeChange" -->
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="total"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      class="dialog"
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
      :modal-append-to-body="false"
      @close="close"
    >
      <el-upload
        class="avatar-uploader"
        action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
        :show-file-list="false"
        name="image"
        :headers="headers"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-dialog>
  </div>
</template>
<script>
import { getUser } from '@/utils/storage.js'
import { getALLList, getIsCollect, removeImg } from '@/api/material'
export default {
  data () {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 30,
      tabPosition: 'left',
      dialogVisible: false,
      imageUrl: '',
      headers: {
        Authorization: `Bearer ${getUser().token}`
      },
      collect: false,
      list: [],
      id: '',
      srcList: []
    }
  },
  methods: {
    // 删除图片
    remove (id) {
      this.$confirm('是否删除图片', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        removeImg(id).then(res => {
          // 当删除的图片是但前页最后一个时跳转到上一页面
          if (this.list.length <= 1) {
            this.currentPage = 2
            if (this.currentPage === 1) {
              this.currentPage = 1
            }
          }
          this.getList()
        })
      })
    },
    // 点击收藏图片
    isCollect (item) {
      getIsCollect({ id: item.id, collect: !item.is_collected }).then(res => {
        item.is_collected = res.data.collect
        this.$message.success('收藏成功')
      })
    },
    // 切换列表
    collectTotal (value) {
      if (value === 'right') {
        this.collect = true
        this.currentPage = 1
        const data = {
          collect: this.collect,
          per_page: this.pageSize,
          page: this.currentPage
        }
        getALLList(data).then(res => {
          this.list = res.data.results
          this.total = res.data.total_count
        })
      } else {
        this.getList()
      }
    },
    getList () {
      // 获取全部图片
      const data = {
        per_page: this.pageSize,
        page: this.currentPage
      }
      getALLList(data).then(res => {
        this.list = res.data.results
        console.log(this.list)
        res.data.results.forEach(v => {
          this.srcList.push(v.url)
        })
        console.log(this.srcList)
        this.total = res.data.total_count
        this.collect = res.data.is_collected
      })
    },
    // 上传图片成功回调
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.$message.success('上传成功')
      this.dialogVisible = false
      this.getList()
    },
    // 关闭弹框回调
    close () {
      this.imageUrl = ''
    },
    // 上传图片大小
    beforeAvatarUpload (file) {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!')
      }
      return isJPG && isLt2M
    },
    // 切换页码获取数据
    handleCurrentChange (val) {
      this.currentPage = val
      this.getList()
    }
  },
  created () {
    this.getList()
  }
}
</script>
<style lang="less">
.material {
  background-color: #ffffff;
  padding: 20px;
  .active1 {
    color: red !important;
  }
  .top {
    height: 20px;
  }
  .bottom {
    padding-top: 30px;
    border-top: 1px solid #e2e2e2;
    .nav {
      position: relative;
      .left {
        .main {
          margin-top: 20px;
          ul {
            padding: 0;
            margin: 0;
            li {
              height: 160px;
              list-style: none;
              text-align: center;
              position: relative;
              margin-bottom: 10px;
              .bottom-btn {
                height: 30px;
                width: 100%;
                background: rgba(178, 178, 178, 0.6);
                font-size: 16px;
                position: absolute;
                bottom: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                i.collection {
                  color: white;
                  cursor: pointer;
                }
                i.delete {
                  color: white;
                  cursor: pointer;
                }
              }
            }
          }
        }
        .right-btn {
          margin: 0;
        }
      }
      .right {
        position: absolute;
        top: 0;
        right: 0;
      }
    }

    .pagination {
      margin-top: 20px;
      text-align: center;
    }
  }
  .el-dialog__body {
    text-align: center;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
